<template>
	<!-- 展示弹出层 -->
	<u-popup v-if="popupProps.image" :show="showPopup" @close="close" mode="center" bgColor="transparent">
		<view class="content">
			<!-- <image src="/static/images/index/home_img.png"></image> -->
			<image @click="goRecommend" :src="popupProps.image"></image>
		</view>

		<view class="close-btn" @click="close">
			<image src="/static/images/index/round-cancel.png"></image>
		</view>
	</u-popup>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import myMixins from '../../common/mixins/myMixins';
export default {
	// 判断是否同意活动，点餐页报错
	mixins: [myMixins],
	props: {
		showPopup: {
			default: false,
			type: Boolean
		},
		popupProps: {
			type: Object,
			default: {}
		}
	},
	computed: {
		...mapState(['showBoard', 'scene', 'userInfo', 'popup'])
	},
	methods: {
		...mapMutations(['SET_POPUP']),
		close() {
			uni.showTabBar();
			this.$emit('close');
			const newArr = [];
			this.popup.forEach((item) => {
				if (this.popupProps.promotionId === item.promotionId) {
					newArr.push({ ...item, isShow: false });
				} else {
					newArr.push(item);
				}
			});
			this.SET_POPUP(newArr);
		},
		goRecommend() {
			if (!this.popupProps.urlType) return;
			if (!this.scene && this.popupProps.urlType === 1) {
				uni.switchTab({
					url: '/pages/tab_bar/classify/classify'
				});
				this.close();
				return;
			}
			if (!this.userInfo.id && (this.popupProps.urlType === 2 || this.popupProps.urlType === 3)) {
				this.close();
				// this.$u.route('/pages/login/login?type=advertising&popupProps=' + encodeURIComponent(JSON.stringify(this.popupProps)));
				this.routeParams('/pages/login/login', { type: 'advertising', popupProps: this.popupProps });
				return;
			}
			this.close();
			this.$u.route(this.popupProps.value);
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	height: 769rpx;
	width: 498rpx;
	border-radius: 20rpx;
	overflow: hidden;

	image {
		width: 100%;
		height: 100%;
	}
}

.close-btn {
	width: 40rpx;
	height: 40rpx;
	margin: 30rpx auto;

	image {
		width: 100%;
		height: 100%;
	}
}
</style>
